<script setup lang="ts">
import { Ref, ref, onMounted, onBeforeUnmount } from 'vue'
import { EqualHeightList } from './EqualHeightList'
const data: Ref = ref([])
const viewData: Ref = ref([])
const equalHeightList = new EqualHeightList()
interface Item {
  name: string
  id: number
}
for (let i = 0; i < 100; i++) {
  const item: Item = { name: `${i}`, id: i }
  data.value.push(item)
}
viewData.value = data.value.slice(0, 10)
const onDataRequired = (param: { startIndex: number; pageSize: number }) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let endIndex = param.startIndex + param.pageSize > data.value.length ? data.value.length : param.startIndex + param.pageSize
      viewData.value = data.value.slice(param.startIndex, endIndex)
      resolve(null)
    }, 100)
  })
}

onMounted(() => {
  let param = {
    containerSelector: '.titleList',
    onDataRequired,
    totalRowCount: data.value.length,
  }
  equalHeightList.init(param)
})
onBeforeUnmount(() => {
  equalHeightList.destroy()
})
</script>

<template>
  <div class="titleList">
    <div v-for="item in viewData" :key="item.id" class="titleItem">{{ item.name }}</div>
  </div>
</template>
<style scoped>
.titleList {
  width: 100%;
  height: 100%;
}
.titleItem {
  box-sizing: border-box;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
